<template>
  <div class="auth-container">
    <div class="auth-card">
      <transition name="fade-slide" mode="out-in">
        <!-- 登录表单保持不变 -->
        <form v-if="activeTab === 'login'" @submit.prevent="handleLogin" class="auth-form">
          <h2>欢迎</h2>
          <div class="form-group">
            <label for="login-email">邮箱</label>
            <input
              id="login-email"
              v-model="loginForm.account"
              type="text"
              placeholder="请输入您的邮箱"
              required
              @focus="focusInput"
              class="animated-input"
            />
          </div>
          <div class="form-group">
            <label for="login-password">密码</label>
            <input
              id="login-password"
              v-model="loginForm.password"
              type="password"
              placeholder="请输入密码"
              required
              @focus="focusInput"
              class="animated-input"
            />
          </div> 
          <button type="submit" class="primary-btn">
            <span>登录</span>
          </button>
          
          <div class="forgot-password">
            <button type="button" class="text-btn" @click="activeTab = 'forgot'">忘记密码？</button>
          </div>
          
          <div class="register-hint">
            <span>如果没有账号，请</span>
            <button type="button" class="text-btn" @click="activeTab = 'register'">注册</button>
          </div>
        </form>

        <!-- 注册表单 -->
        <form v-else-if="activeTab === 'register'" @submit.prevent="handleRegister" class="auth-form">
          <h2>创建账户</h2>
          <div class="form-group">
            <label for="register-username">用户名</label>
            <input
              id="register-username"
              v-model="registerForm.username"
              type="text"
              placeholder="请输入用户名"
              required
              @focus="focusInput"
              class="animated-input"
            />
          </div>
          <div class="form-group">
            <label for="register-email">邮箱</label>
            <input
              id="register-email"
              v-model="registerForm.email"
              type="email"
              placeholder="请输入邮箱"
              required
              @blur="validateEmail"
              @focus="focusInput"
              class="animated-input"
            />
            <span v-if="emailError" class="error-text">{{ emailError }}</span>
          </div>
        <div class="form-group">
  <label for="register-password">密码</label>
  <input
    id="register-password"
    v-model="registerForm.password"
    type="password"
    placeholder="至少8位字符"
    required
    @blur="validatePassword"
    @input="validatePassword" 
    @focus="focusInput"
    class="animated-input"
  />
  <div class="error-message" v-if="passwordError">{{ passwordError }}</div>
</div>

<div class="form-group">
  <label for="confirm-password">确认密码</label>
  <input
    id="confirm-password"
    v-model="registerForm.confirmPassword"
    type="password"
    placeholder="再次输入密码"
    required
    @blur="validateConfirmPassword"
    @input="validateConfirmPassword"
    @focus="focusInput"
    class="animated-input"
  />
  <div class="error-message" v-if="confirmPasswordError">{{ confirmPasswordError }}</div>
</div>
          <div class="verification-group">
            <input
              v-model="registerForm.verificationCode"
              type="text"
              placeholder="验证码"
              required
              @focus="focusInput"
              class="animated-input"
            />
            <button 
              type="button" 
              class="secondary-btn"
              :disabled="!isEmailValid || isSendingCode || countdown > 0"
              @click="sendVerificationCode"
            >
              {{ isSendingCode ? '发送中...' : countdown > 0 ? `${countdown}秒后重试` : '获取验证码' }}
            </button>
          </div>
          <button type="submit" class="primary-btn">
            <span>注册</span>
          </button>
          
          <div class="login-hint">
            <span>已有账号？</span>
            <button type="button" class="text-btn" @click="activeTab = 'login'">去登录</button>
          </div>
        </form>

        <!-- 忘记密码表单 -->
        <form v-else @submit.prevent="handleForgotPassword" class="auth-form">
          <h2>重置密码</h2>
          <div class="form-group">
            <label for="forgot-email">邮箱</label>
            <input
              id="forgot-email"
              v-model="forgotForm.email"
              type="email"
              placeholder="请输入注册邮箱"
              required
              @blur="validateForgotEmail"
              @focus="focusInput"
              class="animated-input"
            />
            <span v-if="forgotEmailError" class="error-text">{{ forgotEmailError }}</span>
          </div>
          <div class="verification-group">
            <input
              v-model="forgotForm.verificationCode"
              type="text"
              placeholder="验证码"
              required
              @focus="focusInput"
              class="animated-input"
            />
            <button 
              type="button" 
              class="secondary-btn"
              :disabled="!isForgotEmailValid || isSendingForgotCode || countdownForgot > 0"
              @click="sendForgotVerificationCode"
            >
              {{ isSendingForgotCode ? '发送中...' : countdownForgot > 0 ? `${countdownForgot}秒后重试` : '获取验证码' }}
            </button>
          </div>
<div class="form-group">
  <label for="new-password">新密码</label>
  <input
    id="new-password"
    v-model="forgotForm.newPassword"
    type="password"
    placeholder="至少8位字符"
    required
    @blur="validateNewPassword"
    @input="validateNewPassword" 
    @focus="focusInput"
    class="animated-input"
  />
  <div class="error-message" v-if="newPasswordError">{{ newPasswordError }}</div>
</div>

<div class="form-group">
  <label for="confirm-new-password">确认新密码</label>
  <input
    id="confirm-new-password"
    v-model="forgotForm.confirmNewPassword"
    type="password"
    placeholder="再次输入新密码"
    required
    @blur="validateConfirmNewPassword"
    @input="validateConfirmNewPassword"
    @focus="focusInput"
    class="animated-input"
  />
  <div class="error-message" v-if="confirmNewPasswordError">{{ confirmNewPasswordError }}</div>
</div>
          <button type="submit" class="primary-btn">
            <span>重置密码</span>
          </button>
          
          <div class="login-hint">
            <button type="button" class="text-btn" @click="activeTab = 'login'">返回登录</button>
          </div>
        </form>
      </transition>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onBeforeUnmount } from 'vue'
import { login } from '@/api/Login'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores'
import { register } from '@/api/Register_email'
import { getcode } from '@/api/Email_send-code'
import { resetpassword } from '@/api/Reset_password'
import { ElMessage } from 'element-plus'

const activeTab = ref('login')
const router = useRouter()
const userStore = useUserStore()

// 倒计时相关状态
const countdown = ref(0)
const countdownForgot = ref(0)
let countdownTimer = null
let countdownForgotTimer = null



// 表单数据
const loginForm = ref({
  account: '',
  password: ''
})

const registerForm = ref({
  username: '',
  email: '',
  password: '',
  confirmPassword: '',
  verificationCode: ''
})

const forgotForm = ref({
  email: '',
  verificationCode: '',
  newPassword: '',
  confirmNewPassword: ''
})

// 验证状态
const emailError = ref('')
const forgotEmailError = ref('')
const isSendingCode = ref(false)
const isSendingForgotCode = ref(false)

// 倒计时方法
const startCountdown = () => {
  countdown.value = 60
  countdownTimer = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) {
      clearInterval(countdownTimer)
    }
  }, 1000)
}

const startForgotCountdown = () => {
  countdownForgot.value = 60
  countdownForgotTimer = setInterval(() => {
    countdownForgot.value--
    if (countdownForgot.value <= 0) {
      clearInterval(countdownForgotTimer)
    }
  }, 1000)
}

// 组件卸载前清除定时器
onBeforeUnmount(() => {
  if (countdownTimer) clearInterval(countdownTimer)
  if (countdownForgotTimer) clearInterval(countdownForgotTimer)
})

// 输入框动画效果
const focusInput = (event) => {
  const input = event.target
  const label = input.previousElementSibling
  
  // 添加安全判断
  if (label && label.classList) {
    label.classList.add('label-focused')
    input.classList.add('input-focused')
    
    setTimeout(() => {
      label.classList.remove('label-focused')
      input.classList.remove('input-focused')
    }, 300)
  }
}
const newPasswordError = ref('')
const confirmNewPasswordError = ref('')

// 新密码验证函数
const validateNewPassword = () => {
  if (!forgotForm.value.newPassword) {
    newPasswordError.value = '请输入新密码'
  } else if (forgotForm.value.newPassword.length < 8) {
    newPasswordError.value = '密码至少需要8位字符'
  } else {
    newPasswordError.value = ''
  }
  // 如果确认密码已输入，则也验证一致性
  if (forgotForm.value.confirmNewPassword) {
    validateConfirmNewPassword()
  }
}

// 确认新密码验证函数
const validateConfirmNewPassword = () => {
  if (!forgotForm.value.confirmNewPassword) {
    confirmNewPasswordError.value = '请再次输入新密码'
  } else if (forgotForm.value.newPassword !== forgotForm.value.confirmNewPassword) {
    confirmNewPasswordError.value = '两次输入的密码不一致'
  } else {
    confirmNewPasswordError.value = ''
  }
}

// 验证函数
const validateEmail = () => {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  if (!registerForm.value.email) {
    emailError.value = '请输入邮箱'
  } else if (!emailRegex.test(registerForm.value.email)) {
    emailError.value = '请输入有效的邮箱地址'
  } else {
    emailError.value = ''
  }
}

const validateForgotEmail = () => {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  if (!forgotForm.value.email) {
    forgotEmailError.value = '请输入邮箱'
  } else if (!emailRegex.test(forgotForm.value.email)) {
    forgotEmailError.value = '请输入有效的邮箱地址'
  } else {
    forgotEmailError.value = ''
  }
}
const passwordError = ref('')
const confirmPasswordError = ref('')
// 密码验证函数
const validatePassword = () => {
  if (!registerForm.value.password) {
    passwordError.value = '请输入密码'
  } else if (registerForm.value.password.length < 8) {
    passwordError.value = '密码至少需要8位字符'
  } else {
    passwordError.value = ''
  }
  // 如果确认密码已输入，则也验证一致性
  if (registerForm.value.confirmPassword) {
    validateConfirmPassword()
  }
}

// 确认密码验证函数
const validateConfirmPassword = () => {
  if (!registerForm.value.confirmPassword) {
    confirmPasswordError.value = '请再次输入密码'
  } else if (registerForm.value.password !== registerForm.value.confirmPassword) {
    confirmPasswordError.value = '两次输入的密码不一致'
  } else {
    confirmPasswordError.value = ''
  }
}



// 计算属性
const isEmailValid = computed(() => {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  return emailRegex.test(registerForm.value.email)
})

const isForgotEmailValid = computed(() => {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  return emailRegex.test(forgotForm.value.email)
})

// 表单处理函数
const handleLogin = async() => {

  console.log('登录数据:', loginForm.value)
  const user = await login(loginForm.value)
  if (user) {
    userStore.setUserId(user.userId)
    userStore.setUsername(user.userName)
    userStore.setToken(user.token)
    userStore.updateAvatar(user.avatar)
    router.push('common-ai') 
    ElMessage.success('登录成功！')
  } else {
    ElMessage.error('用户名或密码错误！')
  }
}

const handleRegister = async() => {
  console.log('注册数据:', registerForm.value)
  if (!registerForm.value.username) {
    alert('请输入用户名')
    return
  }
  if (registerForm.value.password !== registerForm.value.confirmPassword) {
    alert('两次输入的密码不一致')
    return
  }
  console.log('注册数据:', registerForm.value)
  const registerData = {
    userName: registerForm.value.username,
    email: registerForm.value.email,
    password: registerForm.value.password,
    code: registerForm.value.verificationCode
  }
  const res = await register(registerData)
  if (res) {
    ElMessage.success('注册成功！')
    activeTab.value = 'login'
  } else {
    ElMessage.error('注册失败！')
  }
}

const handleForgotPassword = async () => {
  if (forgotForm.value.newPassword !== forgotForm.value.confirmNewPassword) {
    alert('两次输入的新密码不一致')
    return
  }
  const forgetform = {
    account: forgotForm.value.email,
    code: forgotForm.value.verificationCode,
    newPassword: forgotForm.value.newPassword
  }
  await resetpassword(forgetform)
  ElMessage.success('密码重置成功！')
  activeTab.value = 'login'
}

// 注册验证码发送
const sendVerificationCode = async() => {
  isSendingCode.value = true
  try {
    await getcode( registerForm.value.email)
    ElMessage.success('验证码已发送！')
    console.log('验证码已发送！')
    startCountdown()
  } catch (error) {
    ElMessage.error('验证码发送失败')
  } finally {
    isSendingCode.value = false
  }
}

// 忘记密码验证码发送
const sendForgotVerificationCode = async () => {
  isSendingForgotCode.value = true

  try {
   
    await getcode(forgotForm.value.email)
    ElMessage.success('验证码已发送！')
    startForgotCountdown()
  } catch (error) {
    ElMessage.error('验证码发送失败')
  } finally {
    isSendingForgotCode.value = false
  }
}
</script>

<style scoped>
/* 全局容器样式 */
.auth-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 16px;
  background: #F5F2EB url(../assets/bgi.png) center/cover no-repeat fixed;
  box-sizing: border-box;
}

/* 卡片容器 - 登录和忘记密码表单宽度保持较小尺寸 */
.auth-card {
  width: 100%;
  max-width: 360px;
  min-width: 280px;
  background: rgba(255, 255, 255, 0.88);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(139, 90, 43, 0.12);
  overflow: hidden;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(139, 90, 43, 0.08);
  transition: all 0.4s ease;
  box-sizing: border-box;
}

.error-message {
  color: #ff4444;
  font-size: 0.8rem;
  margin-top: 4px;
  height: 16px; /* 保持错误信息区域高度一致 */
}

.animated-input:focus {
  border-color: #4285f4;
  transition: all 0.3s ease;
}

/* 注册表单专用样式 - 进一步减小高度 */
.auth-card.register-card {
  padding-top: 4px;
  padding-bottom: 4px;
}

.auth-card:hover {
  box-shadow: 0 12px 40px rgba(139, 90, 43, 0.18);
}

/* 表单样式 */
.auth-form {
  padding: 28px;
  box-sizing: border-box;
}

/* 注册表单进一步减小内边距 */
.auth-form.register-form {
  padding: 20px 28px; /* 上下内边距再减少4px */
}

h2 {
  margin-bottom: 22px; /* 进一步减小标题下方间距 */
  color: #5a3a1b;
  text-align: center;
  font-weight: 600;
  font-size: clamp(1.3rem, 4vw, 21px); /* 略微减小标题字体 */
  letter-spacing: 0.5px;
}

/* 注册表单标题间距更小 */
.auth-form.register-form h2 {
  margin-bottom: 20px;
  margin-top: 4px; /* 减少标题上方间距 */
}

/* 表单组 - 减小间距降低高度 */
.form-group {
  margin-bottom: 16px; /* 比之前再减少2px */
  position: relative;
}

/* 注册表单的表单组间距更小 */
.auth-form.register-form .form-group {
  margin-bottom: 14px; /* 比登录表单再减少2px */
}

/* 标签样式 */
label {
  display: block;
  margin-bottom: 7px; /* 比之前再减少1px */
  color: #5a3a1b;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 输入框样式 - 进一步减小尺寸 */
.animated-input {
  width: 100%;
  padding: 12px 14px; /* 比之前再减少1px */
  border: 1px solid rgba(139, 90, 43, 0.25);
  border-radius: 10px;
  font-size: 14px; /* 字体略微减小 */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 2px 6px rgba(139, 90, 43, 0.05);
  color: #4a3318;
  box-sizing: border-box;
  height: 42px; /* 固定输入框高度，使其更紧凑 */
}

/* 错误文本 */
.error-text {
  color: #d32f2f;
  font-size: 12px;
  margin-top: 4px; /* 比之前再减少1px */
  display: block;
  animation: shake 0.4s ease;
}

/* 验证码组 */
.verification-group {
  display: flex;
  gap: 8px; /* 比之前再减少2px */
  margin-bottom: 16px; /* 比之前再减少2px */
  flex-wrap: nowrap;
}

/* 注册表单的验证码组间距更小 */
.auth-form.register-form .verification-group {
  margin-bottom: 14px;
}

.verification-group .animated-input {
  flex: 1;
  min-width: 0;
}

/* 按钮样式 - 进一步减小高度 */
.primary-btn {
  width: 100%;
  padding: 12px; /* 比之前再减少1px */
  background-color: #8B5A2B;
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 15px; /* 字体略微减小 */
  font-weight: 500;
  cursor: pointer;
  margin-top: 8px; /* 比之前再减少2px */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 8px rgba(139, 90, 43, 0.2);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  height: 42px; /* 固定按钮高度 */
}

/* 注册表单的主按钮上方间距更小 */
.auth-form.register-form .primary-btn {
  margin-top: 6px;
}

/* 验证码按钮进一步减小尺寸 */
.secondary-btn {
  padding: 0 14px; /* 比之前再减少2px */
  background-color: rgba(255, 255, 255, 0.7);
  color: #8B5A2B;
  border: 1px solid #8B5A2B;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  height: 42px; /* 比之前再减少2px */
  font-size: 13px; /* 字体略微减小 */
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(139, 90, 43, 0.1);
}

/* 底部链接 - 进一步减小间距 */
.register-hint, .login-hint, .forgot-password {
  text-align: center;
  margin-top: 14px; /* 比之前再减少2px */
  color: #5a3a1b;
  font-size: 13px; /* 字体略微减小 */
}

/* 注册表单的底部链接间距更小 */
.auth-form.register-form .register-hint,
.auth-form.register-form .login-hint {
  margin-top: 12px;
}

.forgot-password {
  margin-top: 8px; /* 比之前再减少2px */
  margin-bottom: 4px; /* 比之前再减少2px */
}

.text-btn {
  background: none;
  border: none;
  color: #8B5A2B;
  cursor: pointer;
  padding: 0 4px;
  font-size: 13px; /* 字体略微减小 */
  font-weight: 500;
  text-decoration: underline;
  transition: all 0.2s ease;
}

.text-btn:hover {
  color: #7a4c24;
  text-decoration: none;
}

/* 过渡动画 */
.fade-slide-enter-active,
.fade-slide-leave-active {
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-slide-enter-from {
  opacity: 0;
  transform: translateX(12px);
}

.fade-slide-leave-to {
  opacity: 0;
  transform: translateX(-12px);
}

/* 关键帧动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  20%, 60% {
    transform: translateX(-4px);
  }
  40%, 80% {
    transform: translateX(4px);
  }
}

/* 响应式设计调整 */
@media (max-width: 359px) {
  .auth-card {
    border-radius: 10px;
    margin: 8px;
    max-width: 320px;
  }
  
  .auth-form {
    padding: 16px;
  }
  
  .auth-form.register-form {
    padding: 14px 16px;
  }
  
  h2 {
    font-size: 18px;
    margin-bottom: 16px;
  }
}

@media (min-width: 360px) and (max-width: 479px) {
  .auth-card {
    border-radius: 12px;
    margin: 12px;
    max-width: 340px;
  }
}

@media (min-width: 768px) {
  .auth-card {
    margin: 0 20px;
  }
}

@media (min-width: 1200px) {
  .auth-container {
    padding: 40px;
  }
  
  .auth-card {
    max-width: 380px;
  }
}




/* 1. 超宽屏显示器 (≥3000px) */
@media (min-width: 3000px) {
  .auth-card {
    max-width: 680px;
    border-radius: 28px;
  }
  
  .auth-form {
    padding: 48px;
  }
  
  h2 {
    font-size: 2.8rem;
    margin-bottom: 36px;
  }
  
  label {
    font-size: 1.4rem;
    margin-bottom: 14px;
  }
  
  .animated-input {
    font-size: 1.4rem;
    padding: 22px;
    height: 68px;
    border-radius: 14px;
  }
  
  .primary-btn {
    font-size: 1.4rem;
    height: 68px;
    border-radius: 14px;
    margin-top: 24px;
  }
  
  .secondary-btn {
    font-size: 1.2rem;
    height: 68px;
    border-radius: 12px;
    padding: 0 24px;
  }
  
  .text-btn {
    font-size: 1.2rem;
  }
  
  .register-hint, 
  .login-hint, 
  .forgot-password {
    font-size: 1.2rem;
    margin-top: 24px;
  }
  
  .error-text,
  .error-message {
    font-size: 1.1rem;
  }
  
  /* 过渡动画增强 */
  .fade-slide-enter-from,
  .fade-slide-leave-to {
    transform: translateX(40px);
  }
}

/* 2. 超大屏幕显示器 (≥2300px) */
@media (min-width: 2300px) and (max-width: 2999px) {
  .auth-card {
    max-width: 580px;
    border-radius: 24px;
  }
  
  .auth-form {
    padding: 42px;
  }
  
  h2 {
    font-size: 2.4rem;
    margin-bottom: 32px;
  }
  
  label {
    font-size: 1.2rem;
    margin-bottom: 12px;
  }
  
  .animated-input {
    font-size: 1.2rem;
    padding: 20px;
    height: 60px;
    border-radius: 12px;
  }
  
  .primary-btn {
    font-size: 1.2rem;
    height: 60px;
    border-radius: 12px;
    margin-top: 20px;
  }
  
  .secondary-btn {
    font-size: 1.1rem;
    height: 60px;
    border-radius: 10px;
    padding: 0 20px;
  }
  
  .text-btn {
    font-size: 1.1rem;
  }
  
  .register-hint, 
  .login-hint, 
  .forgot-password {
    font-size: 1.1rem;
    margin-top: 20px;
  }
  
  .error-text,
  .error-message {
    font-size: 1rem;
  }
  
  .fade-slide-enter-from,
  .fade-slide-leave-to {
    transform: translateX(30px);
  }
}

/* 3. 大屏幕显示器 (1920px - 2300px) */
@media (min-width: 1920px) and (max-width: 2300px) {
  .auth-card {
    max-width: 520px;
    border-radius: 22px;
  }
  
  .auth-form {
    padding: 38px;
  }
  
  h2 {
    font-size: 2.2rem;
    margin-bottom: 30px;
  }
  
  label {
    font-size: 1.1rem;
    margin-bottom: 11px;
  }
  
  .animated-input {
    font-size: 1.1rem;
    padding: 18px;
    height: 56px;
    border-radius: 11px;
  }
  
  .primary-btn {
    font-size: 1.1rem;
    height: 56px;
    border-radius: 11px;
    margin-top: 18px;
  }
  
  .secondary-btn {
    font-size: 1rem;
    height: 56px;
    border-radius: 9px;
    padding: 0 18px;
  }
  
  .text-btn {
    font-size: 1rem;
  }
  
  .register-hint, 
  .login-hint, 
  .forgot-password {
    font-size: 1rem;
    margin-top: 18px;
  }
  
  .error-text,
  .error-message {
    font-size: 0.95rem;
  }
}


/* 3. 中大屏幕显示器 (1751px - 1919px) */
@media (min-width: 1751px) and (max-width: 1919px) {
  .auth-card {
    max-width: 420px;
    border-radius: 18px;
  }
  
  .auth-form {
    padding: 30px;
  }
  
  h2 {
    font-size: 1.7rem;
    margin-bottom: 24px;
  }
  
  label {
    font-size: 0.95rem;
    margin-bottom: 8px;
  }
  
  .animated-input {
    font-size: 0.95rem;
    padding: 14px;
    height: 46px;
  }
  
  .primary-btn {
    font-size: 0.95rem;
    height: 46px;
  }
  
  .secondary-btn {
    font-size: 0.9rem;
    height: 46px;
  }
  
  .text-btn {
    font-size: 0.9rem;
  }
  
  .register-hint, 
  .login-hint, 
  .forgot-password {
    font-size: 0.9rem;
  }
  
  .error-text,
  .error-message {
    font-size: 0.8rem;
  }
}

/* 4. 中等屏幕显示器 (1601px - 1750px) */
@media (min-width: 1601px) and (max-width: 1750px) {
  .auth-card {
    max-width: 400px;
    border-radius: 16px;
  }
  
  .auth-form {
    padding: 28px;
  }
  
  h2 {
    font-size: 1.6rem;
    margin-bottom: 22px;
  }
  
  label {
    font-size: 0.9rem;
    margin-bottom: 8px;
  }
  
  .animated-input {
    font-size: 0.9rem;
    padding: 13px;
    height: 44px;
  }
  
  .primary-btn {
    font-size: 0.9rem;
    height: 44px;
  }
  
  .secondary-btn {
    font-size: 0.85rem;
    height: 44px;
  }
  
  .text-btn {
    font-size: 0.85rem;
  }
  
  .register-hint, 
  .login-hint, 
  .forgot-password {
    font-size: 0.85rem;
  }
  
  .error-text,
  .error-message {
    font-size: 0.75rem;
  }
}

/* 过渡动画的响应式调整 */
@media (min-width: 1601px) {
  .fade-slide-enter-from,
  .fade-slide-leave-to {
    transform: translateX(20px);
  }
}



</style>
